<template>
	<view class="lightLayout">
		<view class="lightLeft border_box">
			<view class="border_inner">
				<view class="global-visualization-box-head">{{ ll_title }}
				</view>
				<view class="lleft_echart">
					<uni-echarts ref="echartsll" :option="optionLValue" canvasId="echartsll"></uni-echarts>
				</view>
			</view>
		</view>
		<view class="lightRight border_box">
			<view class="border_inner">
				<view class="global-visualization-box-head">{{ lr_title }}
				</view>
				<view class="light-right-container">
					<div class="right-content">
						<div v-for="item in rightInfos" :key="item.id" class="right-info">
							<img :src="item.img" alt="图片" class="right-img" />
							<span class="right-text">{{ item.text }}</span>
							<span
								:class="item.id === '1' ? 'right-num' : item.id === '2' ? 'right-num1' : 'right-num2'">{{ item.num }}</span>
						</div>
					</div>
					<div class="right-chart">
						<div class="echartsr-container"><img class="light_chart"
								src="http://portal.xumengte.com/icons/loght_chart.gif" />
							<view class="light-item"><text>日照明使用率</text><text
									style="color:#73DEFF;margin-top: 1vh;font-weight: bold;">25%</text></view>
						</div>
						<div class="echartsr-container"><img class="light_chart"
								src="http://portal.xumengte.com/icons/loght_chart.gif" />
							<view class="light-item"><text>日节约照明电量</text><text
									style="color:#73DEFF;margin-top: 1vh;font-weight: bold;">158kWh</text></view>
						</div>
						<div class="echartsr-container"><img class="light_chart"
								src="http://portal.xumengte.com/icons/loght_chart.gif" />
							<view class="light-item"><text>年节约照明电费</text><text
									style="color:#73DEFF;margin-top: 1vh;font-weight: bold;">￥18123</text></view>
						</div>
					</div>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import moment from "moment";
	import store from '@/store/index.js';
	import * as echarts from 'echarts';
	import $config from '@/common/config.js';
	import request from '@/common/request.js';
	const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
	import UniEcharts from '@/components/echarts-uniapp/echarts-uniapp.vue';
	import {
		optionLightValue
	} from "@/common/light_echart_data.js";
	export default {
		components: {
			UniEcharts
		},
		data() {
			return {
				ll_title: '照明-能耗数据(最近24小时)',
				lr_title: '照明运行数据',
				angleArc: 210,
				timerInterval: '',
				optionLValue: {},
				screenFont: 12,
				rightInfos: [{
						id: '1',
						img: 'http://portal.xumengte.com/homeImg/zj.png',
						num: 220,
					},
					{
						id: '2',
						img: 'http://portal.xumengte.com/homeImg/zx.png',
						text: '在线',
						num: 220,
					},
					{
						id: '3',
						img: 'http://portal.xumengte.com/homeImg/lx.png',
						text: '离线',
						num: 0,
					},
				],
				lightArray: [{
						value: '0.00',
						code: "DL-ADL400-14",
						name: "一层照明",
						unit: "千瓦时"
					},
					{
						value: '0.00',
						code: "DL-ADL400-15",
						name: "二层照明",
						unit: "千瓦时"
					},
					{
						value: '0.00',
						code: "DL-ADL400-16",
						name: "三层照明",
						unit: "千瓦时"
					},
					{
						value: '0.00',
						code: "DL-ADL400-17",
						name: "四层照明",
						unit: "千瓦时"
					},
					{
						value: '0.00',
						code: "DL-ADL400-18",
						name: "五层照明",
						unit: "千瓦时"
					},
					{
						value: '0.00',
						code: "DL-ADL400-19",
						name: "六层照明",
						unit: "千瓦时"
					}
				]
			}
		},
		unmounted() {
			clearInterval(this.timerInterval)
		},
		mounted() {
			let that = this;
			this.screenFont = store.state.screenWidth / 1920 * 16;
			this.optionLValue = optionLightValue;
			if (store.state.hasLogin) {
				this.logMulti()
			}
		},
		methods: {
			logMulti() {
				let that = this;
				let postData = {
					timeType: 'hour', //最近一周
					startTime: moment().startOf('hour').add(-24, 'hour').format(DATE_TIME_FORMAT),
					endTime: moment().startOf('hour').format(DATE_TIME_FORMAT),
					projectId: $config.pcode,
					deviceId: this.lightArray.map(item => item.code).join(","),
				};
				let headerdata = {
					"content-type": "application/json"
				};
				request.postRaw('/jeecgboot/device/data/logMulti', headerdata, postData).then(resData => {
					console.log('resData==>>', resData);
					if (resData.code == 200) {
						let resultData = resData.result;
						if (resultData && resultData[0]) {
							let xDataArray = resultData[0].range.map((item) => {
								return item.substring(11) + '时';
							});

							let seriesArray = []
							let colors = ['rgba(118, 219, 251)', 'rgba(255, 230, 101)', 'rgba(165, 108, 250)',
								'rgba(123, 253, 192)', 'rgba(61, 129, 243)', 'rgba(255, 175, 102)'
							];

							let tmp = that.optionLValue.series[0]
							for (let i = 0; i < that.lightArray.length; i++) {
								seriesArray.push({
									...tmp,
									name: that.lightArray[i].name,
									data: resultData[i]?.data.length > 0 ? (resultData[i]?.data.map(item => item?.power
										?.toFixed(2) || 0)) : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
									itemStyle: {
										color: colors[i]
									}
								})
							}

							that.optionLValue = {
								...that.optionLValue,
								series: seriesArray,
								xAxis: [{
									...that.optionLValue.xAxis[0],
									data: xDataArray
								}]
							};
						}
					}
				}).catch(errData => {
					console.log('errData==env>>', errData)
				});
			},
		},
	}
</script>
<style>
	@import 'index.css';
</style>
